<template>
  <section>
    <!-- 求职意向 -->
    <section class="block pt30">
      <p class="title">求职意向</p>
      <div
        class="job-wish-item"
        v-for="(item, index) in internshipDesire"
        :key="index"
      >
        <div class="row1">
          {{ item.jobName }}<span class="line"></span>{{ item.lowestSalary }}~{{
            item.highestSalary
          }}元/天<span class="line"></span>{{ item.targetCity }}
        </div>
        <div class="job-type" v-for="(it, i) in item.expectedIndustry" :key="i">
          <span v-if="it">{{ it }}</span>
        </div>
      </div>
    </section>
    <!-- 教育经历 -->
    <section class="block pt30">
      <p class="title">教育经历</p>
      <div
        class="word-record-item"
        v-for="(item, index) in educationalExperience"
        :key="index"
      >
        <div class="row1">
          {{ item.schoolName
          }}<span style="margin-left: 20px"
            >{{ item.isOverseasStudy || "无" }}海外留学经历</span
          >
        </div>
        <div class="row2" v-if="item.graduateTime && item.intakeTime">
          {{ item.intakeTime + "~" + item.graduateTime }}
        </div>
        <div class="row2">
          {{ item.educationalBackground }}
          <span class="line"></span>
          {{ item.major }}
          <span class="line"></span>
          {{ ["无", "有"][item.diploma] }}学位证书
          <span class="line" v-if="item.graduateTime == '至今'"></span>
          <w v-if="item.graduateTime == '至今'">{{
            "在读 " + getEducationOptions(item.grade)
          }}</w>
        </div>
      </div>
    </section>
    <!-- 工作/实习经历 -->
    <section class="block pt30">
      <p class="title">工作/实习经历</p>
      <div
        class="word-record-item"
        v-for="(item, index) in workExperience"
        :key="index"
      >
        <div class="row2">{{ item.entryTime }}~{{ item.resignationTime }}</div>
        <div class="row1">{{ item.companyName }}</div>
        <div class="row2">{{ item.jobName }}</div>
        <div class="row4">
          <span class="label">职位类型:</span
          ><span class="value">{{ ["实习", "全职"][item.jobType] }}</span>
          <span class="label">所属行业:</span
          ><span class="value">{{ item.industry }}</span>
        </div>
        <div
          class="row5"
          v-if="item.jobDescription"
          v-html="item.jobDescription.replace(/\n/gm, '<br>')"
        ></div>
      </div>
    </section>
    <!-- 项目经历 -->
    <section class="block pt30">
      <p class="title">项目经历</p>
      <div
        class="word-record-item"
        v-for="(item, index) in projectExperience"
        :key="index"
      >
        <div class="row1">{{ item.beginTime }}~{{ item.endTime }}</div>
        <div class="row2">{{ item.projectName }}</div>
        <div
          class="row5"
          v-if="item.projectDescription"
          v-html="item.projectDescription.replace(/\n/gm, '<br>')"
        ></div>
      </div>
    </section>
    <!-- 语言能力 -->
    <section class="block pt30">
      <p class="title">语言能力</p>
      <div
        class="word-record-item"
        v-for="(item, index) in languageAbility"
        :key="index"
      >
        <div class="row1 rows">
          {{ item.languageName
          }}<span style="color: #9597a0">{{ item.level }}</span>
        </div>
      </div>
    </section>
    <!-- 专业技能 -->
    <section class="block pt30">
      <p class="title">专业技能</p>
      <div
        class="word-record-item"
        v-for="(item, index) in specialtyAbility"
        :key="index"
      >
        <div class="row1 rows">
          {{ item.specialtyName
          }}<span style="color: #9597a0">{{ item.level }}</span>
        </div>
      </div>
    </section>
    <!-- 证书 -->
    <section class="block pt30">
      <p class="title">证书</p>
      <div
        class="word-record-item"
        v-for="(item, index) in certificates"
        :key="index"
      >
        <div class="row1 rows">
          {{ item.certificatesName
          }}<span style="color: #9597a0">{{ item.time }}</span>
        </div>
      </div>
    </section>
    <!-- 已修课程 -->
    <section class="block pt30">
      <p class="title">已修课程</p>
      <div
        class="word-record-item"
        v-for="(item, index) in courses"
        :key="index"
      >
        <div class="row2">{{ item.time }}</div>
        <div class="row1">{{ item.coursesName }}</div>
      </div>
    </section>
    <!-- 社会实践/活动经历 -->
    <section class="block pt30">
      <p class="title">社会实践/活动经历</p>
      <div
        class="word-record-item"
        v-for="(item, index) in practiceExperience"
        :key="index"
      >
        <div class="row1">{{ item.beginTime }}~{{ item.endTime }}</div>
        <div class="row2">{{ item.practiceName }}</div>
        <div
          class="row5"
          v-if="item.practiceDescription"
          v-html="item.practiceDescription.replace(/\n/gm, '<br>')"
        ></div>
      </div>
    </section>
  </section>
</template>

<script>
import { educationOptions } from "@/utils/frontDataDict.js";
export default {
  name: "curriculumItem",
  data() {
    return {
      internshipDesire: [], //实习意向
      educationalExperience: [], //教育经历列表
      workExperience: [], //工作、实习经历列表
      projectExperience: [], //项目经历列表
      languageAbility: [], //语言能力列表
      specialtyAbility: [], //专业技能列表
      certificates: [], //证书列表
      courses: [], //已修课程列表
      practiceExperience: [], //实践经验
    };
  },
  props: {
    item: {
      type: Object,
    },
  },
  mounted() {
    if (!this.item) return;
    this.fetchJSON(this.item.internshipDesire, "internshipDesire");
    this.educationalExperience = this.item.educationalExperience;
    this.fetchJSON(this.item.workExperience, "workExperience");
    this.fetchJSON(this.item.projectExperience, "projectExperience");
    this.fetchJSON(this.item.languageAbility, "languageAbility");
    this.fetchJSON(this.item.specialtyAbility, "specialtyAbility");
    this.fetchJSON(this.item.certificates, "certificates");
    this.fetchJSON(this.item.courses, "courses");
    this.fetchJSON(this.item.practiceExperience, "practiceExperience");
  },
  methods: {
    fetchJSON(str, key) {
      if (!str) return [];
      let arr = JSON.parse(str);
      if (arr.length <= 0) return [];
      this[key] = arr;
    },
    getEducationOptions(id) {
      let val = "";
      educationOptions.forEach((e) => {
        if (!e.children) return;
        let list = e.children.filter((v) => v.value == id);
        list.length > 0 && (val = list[0].label);
      });
      return val;
    },
  },
};
</script>

<style lang="less" scoped>
.block {
  position: relative;
  background: #fff;
  margin-bottom: 15px;
}
.pt30 {
  padding: 25px 15px;
}
.title {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #37383d;
  line-height: 28px;
  margin: 0 0 26px;
  padding: 0;
}
.job-wish-item {
  .row1 {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383d;
    line-height: 25px;
    margin-bottom: 18px;
    .line {
      position: relative;
      display: inline-block;
      margin: 0 20px;
    }
  }
  .job-type {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 22px;
  }
}
.word-record-item {
  padding-bottom: 30px;
  border-bottom: 1px solid #d4d6da;
  margin-bottom: 25px;
  &:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #fff;
  }
  .rows {
    display: flex;
    justify-content: space-between;
  }
  .row1 {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
    line-height: 28px;
    margin-bottom: 18px;
  }
  .row2 {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 25px;
    margin-bottom: 10px;
    .line {
      margin: 0 10px;
    }
    span {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #9597a0;
      line-height: 20px;
      margin-left: 218px;
    }
  }
  .row3 {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 20px;
    margin-bottom: 10px;
    .line {
      position: relative;
      display: inline-block;
      margin: 0 20px;
    }
  }
  .row4 {
    margin-bottom: 10px;
    .label {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 25px;
      margin-right: 12px;
    }
    .value {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #030303;
      line-height: 25px;
      margin-right: 130px;
    }
  }
  .row5 {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383d;
    line-height: 36px;
    word-break: break-all;
  }
}
@media screen and (max-width: 480px) {
  .block {
    position: relative;
    background: #fff;
    margin-bottom: 15px;
  }
  .pt30 {
    padding: 13px 10px;
  }
  .title {
    font-size: 17px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
    line-height: 24px;
    margin: 0 0 16px;
    padding: 0;
  }
  .job-wish-item {
    .row1 {
      font-size: 0.15rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 0.21rem;
      margin-bottom: 0.08rem;
      .line {
        position: relative;
        display: inline-block;
        margin: 0 20px;
        width: 1px;
        height: 10px;
        opacity: 0.7;
        border: 1px solid #9CA8BE;
      }
    }
    .job-type {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 18px;
    }
  }
  .word-record-item {
    padding-bottom: 0.2rem;
    border-bottom: 0;
    margin-bottom: 0;
    &:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 1px solid #fff;
    }
    .rows {
      display: flex;
      justify-content: space-between;
    }
    .row1 {
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383d;
      line-height: 21px;
      margin-bottom: 10px;
    }
    .row2 {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 18px;
      margin-bottom: 10px;
      .line {
        display: inline-block;
        width: 0.01rem;
        height: 0.11rem;
        opacity: 0.7;
        border: 1px solid #9CA8BE;
        margin: 0 0.15rem;
      }
      span {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #9597a0;
        line-height: 20px;
        margin-left: 218px;
      }
    }
    .row3 {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
      margin-bottom: 10px;
      .line {
        position: relative;
        display: inline-block;
        margin: 0 20px;
      }
    }
    .row4 {
      margin-bottom: 10px;
      .label {
        font-size: 0.13rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597A0;
        line-height: 0.18rem;
        margin-right: 12px;
      }
      .value {
        font-size: 0.13rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #030303;
        line-height: 0.18rem;
        margin-right: 0.2rem;
      }
    }
    .row5 {
      font-size: 0.13rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #3C3C3C;
      line-height: 0.3rem;
      word-break: break-all;
    }
  }
}
</style>
